<template>
  <view class="extend flex flex-c" :style="{ paddingTop: statusBarHeight }">
    <view class="bg"></view>
    <image class="head-bg" src="../../assets/images/icons/head-bg.png" />
    <view class="search flex flex-a flex-bt" :style="{ top: statusBarHeight }">
      <view class="s-box flex flex-a flex-bt">
        <view class="flex flex-bt f1">
          <image
            src="../../assets/images/icons/search.png"
            mode="scaleToFill"
            style="width: 40rpx; height: 40rpx"
          />
          <input
            v-model="keyword"
            placeholder="请输入关键字"
            placeholder-class="input-placeholder"
            class="input"
            @confirm="onSearch"
          />
        </view>
        <view class="s-btn fs-24 bold">搜索</view>
      </view>
      <image
        src="../../assets/images/icons/filter.png"
        mode="scaleToFill"
        style="width: 48rpx; height: 48rpx"
        @click="showFilter"
        class="filter"
      />
    </view>
    <view class="list-container" :style="{ top: listTop }">
      <view class="list">
        <view v-for="i in 20" :key="i">
          <Card></Card>
        </view>
      </view>
    </view>
    <!-- <tabbar /> -->
  </view>
</template>

<script>
import tabbar from "../../compennts/tabbar/index.vue";
import { schemas } from "../../assets/utils/config";
import { statusBarHeight } from "../../assets/utils/config.js";
import Card from "./components/card.vue";
export default {
  components: {
    tabbar,
    Card,
  },
  data() {
    return {
      statusBarHeight,
      keyword: "",
    };
  },
  computed: {
    listTop() {
      return parseInt(statusBarHeight) + 142 + "rpx";
    },
  },
  onReachBottom() {
    console.log("bottom");
  },
  onReachBottom() {
  },
  onLoad() {
    // #ifdef APP-IOS
    uni.hideHomeButton();
    // #endif
  },
  methods: {
    showFilter() {},
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");

.extend {
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 12;

  .bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    background: linear-gradient(
      180deg,
      #93aafb 0%,
      #f7f8ff 496rpx,
      #f7f8ff 100%
    );
  }
  .head-bg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    user-select: none;
    pointer-events: none;
  }
  .search {
    position: sticky;
    margin-bottom: 32rpx;
    z-index: 6;
    width: 100%;
    padding: 0 32rpx;
    .s-box {
      background: #ffffff;
      height: 88rpx;
      flex: 1;
      border-radius: 16rpx;
      padding: 0 24rpx;
    }
    .input{
      flex:1;
      padding: 0 12rpx;
    }
    .filter{
      margin-left: 16rpx;
    }
    .s-btn{
      width: 96rpx;
      height: 48rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      color:#ffffff;
      background: linear-gradient( 135deg, #819CFF 0%, #436AF3 100%);
    }
  }
  .list-container {
    flex: 1;
    width: 100%;
    z-index: 10;
    overflow-y: scroll;
    .list {
      padding: 0 32rpx;
    }
  }
}
</style>
